<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:c="http://java.sun.com/jsp/jstl/core"
        template="/resources/layout/common-layout.xhtml">

    <ui:define name="head">
    </ui:define>
    <ui:define name="toolbar">
        <h:form prependId="false">
            <p:menubar widgetVar="t">
                <c:forEach items="${skillAreasController.menu.subMenus}" var="subMenu" varStatus="subMenuStatus">
                    <p:submenu label="#{subMenu.text}">
                        <c:forEach items="${subMenu.menuItems}" var="menuItem" varStatus="menuItemStatus">
                            <p:menuitem value="#{menuItem.text}"  url="#{menuItem.url}" />
                        </c:forEach>
                    </p:submenu>
                </c:forEach>
            </p:menubar>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <p:growl id="growl" showDetail="true" showSummary="true" globalOnly="true"/>
        <h:form id="h2" prependId="false">
            <p:panel id="commands">
                <h:panelGrid columns="4">
                    <p:commandButton
                            id="b10"
                            value="#{msgs['btn.add']}"
                            immediate="true"
                            action="#{coursesController.onStartConversation}"
                            actionListener="#{skillAreasController.dataModel.onAdd}"
                            ajax="false"/>
                    <p:commandButton
                            id="b11"
                            value="#{msgs['btn.refresh']}"
                            actionListener="#{skillAreasController.dataModel.onLoad}"
                            ajax="true"
                            update="dt1 growl"/>
                    #{" "} #{msgs['prompt.table.actions']}
                </h:panelGrid>
            </p:panel>
        </h:form>
        <h:form id="h1" prependId="false">
            <p:dataTable
                    id="dt1"
                    widgetVar="dt1Var"
                    binding="#{skillAreasController.dataModel.table}"
                    var="row"
                    value="#{skillAreasController.dataModel.rows}"
                    rows="10"
                    height="500"
                    paginator="true"
                    paginatorAlwaysVisible="true"
                    style="vertical-align:text-top;">
	
                <p:column sortBy="#{row.object.id}" style="width:15px" headerText="#">
                    <h:outputText value="#{row.object.id}"/>
                </p:column>
                <p:column sortBy="#{row.object.name}" style="width:100%" headerText="#{msgs['fld.description']}">
                    <h:outputText value="#{row.object.description}" />
                </p:column>
                <p:column style="width:80px" headerText="Options">
                    <h:commandLink action="#{skillAreasController.onStartConversation}" immediate="true" value="Edit" rendered="#{row.editable}">
                        <f:setPropertyActionListener value="#{row}" target="#{skillAreasController.dataModel.selected}"/>
                        <f:setPropertyActionListener value="false" target="#{skillAreasController.dataModel.selected.readonly}"/>
                    </h:commandLink>#{" "}#{" "}
                    <h:commandLink action="#{skillAreasController.onStartConversation}" immediate="true" value="View">
                        <f:setPropertyActionListener value="#{row}" target="#{skillAreasController.dataModel.selected}"/>
                        <f:setPropertyActionListener value="true" target="#{skillAreasController.dataModel.selected.readonly}"/>
                    </h:commandLink>
                </p:column>
            </p:dataTable>
        </h:form>
    </ui:define>
</ui:composition>
